﻿<template>
    <div>
        <div class="layout-main">
            <el-row style="margin-bottom:12px">
                <el-button v-on:click="add()" size="small" type="primary">添加客户信息</el-button>
            </el-row>
            <el-form ref="queryParams" inline label-position="right" label-width="120px" v-model="queryParams">
                <el-form-item label="客户名称">
                    <el-input size="small" @keyup.enter.native="search()" v-model="queryParams.name" placeholder="客户名称" style="width: 140px" />
                </el-form-item>
                <el-form-item label="客户代码">
                    <el-input size="small" @keyup.enter.native="search()" v-model="queryParams.customerCode" placeholder="客户代码" style="width: 140px" />
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input size="small" @keyup.enter.native="search()" v-model="queryParams.linkMan" placeholder="联系人" style="width: 140px" />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input size="small" @keyup.enter.native="search()" v-model="queryParams.phone" placeholder="联系电话" style="width: 140px" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="search()" size="small" type="primary">搜索</el-button>
                    <el-button v-on:click="reset()" size="small">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :style="{marginBottom:'10px'}">
                <font color="#f00">状态：</font>
                <el-button @click="filterConfirm(null)" size="small" :type="queryParams.state==null?'success':'default'">全部</el-button>
                <el-button size="small" @click="filterConfirm(1)" :type="queryParams.state==1?'success':'default'">启用
                </el-button>
                <el-button size="small" @click="filterConfirm(0)" :type="queryParams.state==0?'danger':'default'">禁用
                </el-button>
                <el-button type="success" size="small" @click="exportExcel" style="float:right;">导出Execel</el-button>
                <el-upload :before-upload="beforeCallback" :on-progress="progressCallback" :on-success="successCallback" style="float: right;" :show-file-list="false" :on-error="errorCallback" class="upload-demo" :action="uploadurl" ref="upload">
                    <el-button size="small" type="primary">批量导入客户</el-button>
                </el-upload>
            </el-row>
            <el-table size="small" :data="customers" border style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column align="center" prop="name" width="155" label="客户名称">
                    <template slot-scope="scope">
                        <div class="state-error">{{scope.row.customerCode}}</div>
                        <div>{{scope.row.name}}</div>
                        <div class="state-success">{{scope.row.shortName}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="linkMan" width="120" label="联系人">
                    <template slot-scope="scope">
                        <div>{{scope.row.linkMan}}</div>
                        <div>{{scope.row.phone}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="userName" width="160" label="模板">
                    <template slot-scope="scope">
                        <div>
                            <TpUpload title="盘标" type="1" :customerCode="scope.row.customerCode" :customerId="scope.row.id" :value="scope.row.smallPackage" />
                        </div>
                        <div>
                            <TpUpload title="盒标" type="2" :customerCode="scope.row.customerCode" :customerId="scope.row.id" :value="scope.row.bigPackage" />
                        </div>
                        <div>
                            <TpUpload title="箱标" type="3" :customerCode="scope.row.customerCode" :customerId="scope.row.id" :value="scope.row.outerPackage" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="deliveryNo" width="120" label="测试单号">
                    <template slot-scope="scope">
                        <div>{{scope.row.deliveryNo}}</div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" width="120" label="备注">
                </el-table-column>
                <el-table-column align="center" prop="state" width="60" label="状态">
                    <template slot-scope="scope">
                        <template v-if="scope.row.state==1">
                            <span class="state-success-full">启用</span>
                        </template>
                        <template v-else>
                            <span class="state-error-full">禁用</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="state" width="120" label="匹配">
                    <template slot-scope="scope">
                        <div>
                            <template v-if="scope.row.dn==1">
                                <span class="state-success-full">验证批次</span>
                            </template>
                            <template v-else>
                                <span class="state-error-full">忽略批次</span>
                            </template>
                        </div>
                        <div>
                            <template v-if="scope.row.pn==1">
                                <span class="state-success-full">验证客户单号</span>
                            </template>
                            <template v-else>
                                <span class="state-error-full">忽略客户单号</span>
                            </template>
                        </div>
                        <div>
                            <template v-if="scope.row.sc==1">
                                <span class="state-success-full">验证生产日期</span>
                            </template>
                            <template v-else>
                                <span class="state-error-full">忽略生产日期</span>
                            </template>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="550" prop="id" label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="danger" @click="doDelete(scope.row)" size="small">删除</el-button> -->
                        <el-button type="primary" @click="edit(scope.row)" size="small">编辑</el-button>
                        <el-button type="primary" @click="showFields(scope.row)" size="small">查看字段名</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
        <CCustomerDialog ref="customerDialog" @ok="getList()" />
        <CCustomerFieldsDialog ref="fieldsDialog" @ok="getList()" />
        <CCustomerAddressDialog ref="customerAddressDialog" @cancel="getList()" @ok="getList()" />
        <CMerchantAddDialog ref="userDialog" @ok="getList()" />
        <CCustomerTpDialog ref="txtDialog" />
    </div>
</template>
<script>
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'
import api from "@/api/api"
import CCustomerDialog from "./CCustomerDialog.vue"
import CCustomerAddressDialog from "./CCustomerAddressDialog.vue"
import CMerchantAddDialog from "./CMerchantAddDialog.vue"
import CCustomerFieldsDialog from "./CCustomerFieldsDialog.vue"
import CCustomerTpDialog from "./CCustomerTpDialog.vue"
export default {
    name: 'Customer',
    components: {
        CCustomerDialog,
        CCustomerAddressDialog,
        CMerchantAddDialog,
        CCustomerFieldsDialog,
        CCustomerTpDialog
    },
    data() {
        return {
            loading: false,
            uploadurl: api.uploadurl,
            queryParams: {
                type: 1
            },
            others: {

            },
            customer: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            customers: [

            ],
            rules: {

            }
        };
    },
    mounted: function() {
        this.search();

    },
    methods: {

        errorCallback: function(file) {
            this.hideLoading();
            this.errorMessage("上传失败！");
        },
        beforeCallback: function() {
            this.showLoading();
        },
        successCallback: function(body, file, fileList) {
            var me = this;
            me.hideLoading();

            if (body.status == 0) {

            } else {
                this.errorMessage(body.info);
            }
        },
        progressCallback: function(event, file, fileList) {
            //
            console.log(event.percent);
        },
        exportExcel: function() {


            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/sys/customer/export.action?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));


        },
        filterType: function(type) {
            this.queryParams.type = type;
            this.search();
        },
        filterConfirm: function(state) {
            this.queryParams.state = state;
            this.search();
        },
        setFields: function(row) {
            this.$refs['fieldsDialog'].showDialog(row.id, row.smallFields, row.bigFields, row.outFields);
        },
        doCopyLink(row) {
            var me = this;
            me.showLoading();
            me.$http.post("/sys/customer/doCopy.action", { id: row.id }).then(response => {
                me.hideLoading();
                var body = response;
                if (body.status == 0) {

                    me.$alert(body.obj, '复制分享连接', {
                        confirmButtonText: '确定',
                        callback: action => {

                        }
                    });
                } else {
                    me.errorMessage(body.info);
                }
            }).catch(error => {
                me.hideLoading();
            });
        },
        showFields(row) {
            var me = this;
            me.showLoading();
            me.$http.post("/sys/customer/showFields.action", { id: row.id }).then(response => {
                me.hideLoading();
                var body = response;
                if (body.status == 0) {

                    //显示出来
                    me.$refs['txtDialog'].showDialog(JSON.parse(body.obj));

                } else {
                    me.errorMessage(body.info);
                }
            }).catch(error => {
                me.hideLoading();
            });
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        reset: function() {
            this.queryParams = { type: 1 };
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.$http.post("/sys/customer/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.customers = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },

        doDelete: function(row) {
            var me = this;
            me.$Modal.confirm({
                title: "提示",
                content: "是否执行该操作",
                onOk: function() {
                    me.$http.post("/sys/customer/doDelete.action", { id: row.id }).then(response => {
                        var body = response;
                        if (body.status == 0) {
                            me.getList();

                        } else {
                            me.errorMessage(body.info);
                        }
                    }).catch(error => {

                    });
                },
                onCancel: function() {

                }
            });
        },
        edit: function(row) {

            this.$refs['customerDialog'].showDialog(row.id);
        },
        add: function() {
            this.customer = {};
            this.$refs['customerDialog'].showDialog("");
        },


    }
}
</script>
<style>
.ad-item {
    border-bottom: 1px dotted #cecece;
}

.ad-item span {
    margin-right: 5px;
}
</style>